<template>
  <div class="addArticle">
    <el-form ref="article" :model="member" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model=" member.name"></el-input>
      </el-form-item>
      <el-form-item label="标签页">
       <el-select v-model="value" ref="menuref"
      @change="handleChange" placeholder="请选择标签页">
        <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
      </el-select>
      </el-form-item>
      <!-- <el-form-item label="栏目">
      <div class="block">
      <el-cascader
      disabled="true"
      ref="menuref"
    v-model="this.$route.params.author"
    :options="options"
    :props="props"
    @change="handleChange"
    ></el-cascader>
    </div>
    </el-form-item> -->
      <!-- <el-form-item label="是否置顶">
        <el-switch v-model="article.top"></el-switch>
      </el-form-item> -->
    </el-form>

        <Markdown :onchange="change" v-bind:initData="article.content"></Markdown>

    <el-row type="flex" class="row-bg" justify="end">
      <el-button class="subBtn" type="primary" @click="updateppage">提交修改</el-button>
    </el-row>
  </div>
</template>

<script>
import Markdown from "../../components/markdown/markdown-editor"
import initData from "../../markData.js"
export default {
  name: "addArticle",
  data () {
    return {
      member: {
        name: this.$route.params.name,
        id: this.$route.params.id,
        // tag: "",
        // top: false,
        // menuid: [],
        introducemd: this.$route.params.introducemd,
        achievementmd: this.$route.params.achievementmd,
        kycgmd: this.$route.params.kycgmd,
        kyxmmd: this.$route.params.kyxmmd
      },
      article: {
        content: ""

      },
      content: {},
      aa: [],
      initData: initData,
      restaurants: [],
      props: [],
      optionsvalue: "",
      idd: [],
      options: [{label: "个人简介", value: "Introduce"},
        {label: "科研成果", value: "Kycg"},
        {label: "科研项目", value: "Kyxm"},
        {label: "荣誉奖励", value: "Achievement"}]

    }
  },
  components: {Markdown},
  methods: {
    toType (obj) {
      return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
    },
    filterNull (o) {
      for (var key in o) {
        if (o[key] === null) {
          delete o[key]
        }
        if (this.toType(o[key]) === "string") {
          o[key] = o[key].trim()
          if (o[key].length === 0) {
            delete o[key]
          }
        } else if (this.toType(o[key]) === "object") {
          o[key] = this.filterNull(o[key])
        } else if (this.toType(o[key]) === "array") {
          o[key] = this.filterNull(o[key])
          if (o[key].length === 0) {
            delete o[key]
          }
        }
      }
      return o
    },
    // getmember () {
    //   this.member.name = this.$route.params.name
    //   this.member.id = this.$route.params.id
    // },
    handleChange (value) {
      this.optionsvalue = value
      this.idd = this.member.id
      // onsole.log(value[value.length - 1])
      // this.aa = value[value.length - 1] // 所选菜单的id
      // console.log(this.$refs["menuref"].getCheckedNodes())
      switch (value) {
      case "Introduce":this.article.content = this.member.introducemd
        console.log(this.member.introducemd)
        console.log(this.article.content)
        break
      case "Kycg":this.article.content = this.member.kycgmd
        console.log(this.member.kycgmd)
        break
      case "Kyxm":this.article.content = this.member.kyxmmd
        break
      case "Achievement":this.article.content = this.member.achievementmd
        break
      }
      this.Markdown = Markdown
      console.log(this.member.id)
    },
    change () {
      console.log(arguments[0], this.article)
      this.article.content = arguments[0]
    },
    querySearch (queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    loadAll () {
      return [
        { "value": "vue" },
        { "value": "node.js" }
      ]
    },
    handleSelect (item) {
      console.log(item)
    },
    updateppage () {
      if (this.optionsvalue === "") {
        this.$message({
          message: "请先选择标签页",
          type: "warning"
        })
      } else {
        console.log(this.idd)
        this.$request.updateppage({
          value: this.optionsvalue,
          content: this.article.content.html,
          contentmd: this.article.content.markdown,
          id: this.idd})
          .then(res => {
            console.log(res)
            this.$message({
              message: "修改成功",
              type: "success"
            })
            switch (this.optionsvalue) {
            case "Introduce":this.member.introducemd = this.article.content.markdown
              break
            case "Kycg":this.member.kycgmd = this.article.content.markdown
              console.log(this.member.kycgmd)
              break
            case "Kyxm": this.member.kyxmmd = this.article.content.markdown
              break
            case "Achievement":this.member.achievementmd = this.article.content.markdown
              break
            }
            this.Markdown = Markdown
          }
          )
          .catch(function (error) {
            console.log(error)
          })
      }
    }
    // this.$axios.post("http://121.4.176.83:90/api/article/add", {
    //   data: this.article
    // })
    // var aa = this.handleChange(this.value)

  },
  mounted () {
    this.restaurants = this.loadAll()
    this.article.content = this.initData
    // this.gettreemenu()
    // var btl = this.$refs.menuref.getCheckedNodes()[0].
    //

    console.log(this.member.id)
  }
}
</script>

<style scoped>
.subBtn{
  width: 100px;
  margin: 0 auto;
}
</style>
